<template>
  <div class="enter">
    <el-input
      v-model="myReply"
      type="textarea"
      placeholder="输入回复..."
      @focus="writingEnter"
      @blur="leavingEnter"
      maxlength="200"
      show-word-limit
    />
    <el-button class="textBtn" type="primary" round @click="sendReply">发送</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits(['reply'])
const myReply = ref<string>('')
import useArticleStore from '@/stores/article/article'
const articleStore = useArticleStore()

const writingEnter = () => {
  articleStore.focusInput = true
}

const leavingEnter = () => {
  articleStore.focusInput = false
}
const sendReply = () => {
  emits('reply', myReply.value)
}
//清空评论框
const clearReply = () => {
  myReply.value = ''
}
defineExpose({ clearReply })
</script>

<style lang="less" scoped>
.enter {
  margin-top: 40px;
  border-radius: 7px 7px 7px 7px;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  :deep(textarea) {
    resize: none;
    height: 173px;
    background: #f8f8f8;
    border: none;
    line-height: 24px;
    box-shadow: none;
    padding-top: 10px;
  }
  :deep(textarea) {
    outline: none;
  }
  :deep(.el-textarea .el-input__count) {
    background: #f8f8f8;
    bottom: -20px;
  }
  .textBtn {
    width: 103px;
    height: 37px;
    margin: 35px 15px 15px auto;
  }
}
</style>
